<template>
  <!-- HomeView.vue -->
  <div class="theme-list">
    <p>亮色<el-divider direction="vertical" />暗黑</p>
    <!--  v-model 绑定 themeConfig.isDark-->
    <el-switch
      v-model="themeConfig.isDark"
      inline-prompt
      active-icon="Sunny"
      inactive-icon="Moon"
    />
  </div>
</template>
<script setup>
  // 1. 引入useDark
  import { useDark } from '@vueuse/core'
  import { reactive } from 'vue'

  // 2. 使用useDark
  const isDark = useDark()

  // 3. 主题配置
  const themeConfig = reactive({
    isDark: isDark
  })
</script>
